<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { Customer } from "@/utils/types";
import axios from 'axios';
import { useRoute ,useRouter} from 'vue-router';
const route = useRoute()
const router = useRouter()
// 初始化
const customer = ref<Customer>({
    name: "",
    phone: "",
    email: "",
    education: "",
    graduationschool: "",
    profession: "",
    profile: ""
})


// const customer = ref<Object>({})
onMounted(async () => {
    const res = await axios.get('http://localhost:3000/users/' + route.params.id)
    console.log(res.data);
    customer.value = res.data

})

const deleteCustomer = async () => {

    await axios.delete('http://localhost:3000/users/' + route.params.id)
    // 页面跳转
    router.push({path:"/",query:{alert:'用户信息删除成功'}})

}


</script>


<template>
    <div class="details container">
        <h1 class="page-headre">
            <router-link class="btn btn-success" to="/">返回</router-link>
            <span style="float:right">
                <router-link class="btn btn-primary" :to="'/edit/'+route.params.id">编辑</router-link>
                &nbsp;
                &nbsp;
                <button class="btn btn-danger" @click="deleteCustomer()">删除</button>
            </span>
        </h1>
        <ul class="list-group">
            <li class="list-group-item">{{customer.name}}</li>
            <li class="list-group-item">{{customer.phone}}</li>
            <li class="list-group-item">{{customer.email}}</li>
            <li class="list-group-item">{{customer.education}}</li>
            <li class="list-group-item">{{customer.graduationschool}}</li>
            <li class="list-group-item">{{customer.profession}}</li>
            <li class="list-group-item">{{customer.profile}}</li>
        </ul>
    </div>
</template>
  
<style>

</style>
  